import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout.vue'

import { getToken } from '@/utils/storage'
import { Toast } from 'vant'

// import Login from '@/views/login.vue'
// import Register from '@/views/register.vue'
// import Detail from '@/views/detail.vue'

// import Like from '@/views/second/like'
// import Article from '@/views/second/article'
// import Collect from '@/views/second/collect'
// import User from '@/views/second/user'
// 这种样子，叫做异步组件
const Detail = () => import('@/views/detail')
const Register = () => import('@/views/register')
const Login = () => import('@/views/login')
const Article = () => import('@/views/second/article')
const Collect = () => import('@/views/second/collect')
const Like = () => import('@/views/second/like')
const User = () => import('@/views/second/user')

// import { getToken } from '@/utils/storage'

Vue.use(VueRouter)
// - 首页（一级） layout
//       - 面经（二级）article
//       - 收藏（二级）collect
//       - 喜欢（二级）like
//       - 我的（二级）user
// - 文章详情页（一级） detail
// - 登录页 （一级） login
// - 注册页（一级） register
const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    // detail文章详情页
    { path: '/detail/:id', component: Detail },
    {
      path: '/',
      component: Layout,
      redirect: '/article', // 可以直接在这里写重定向
      children: [
        { path: 'article', component: Article },
        { path: 'collect', component: Collect },
        { path: 'like', component: Like },
        { path: 'user', component: User }
      ]
    }
  ]
})

// 只要一加上守卫，什么逻辑都不写，直接拦截路由，不能访问了
// 导航守卫
// 全局前置守卫：beforeEach
// 1. 在跳转到每一个路由之前，都会经过这个全局前置守卫
// 2. 只有前置守卫放行了，才能访问到对应的组件页面

// to:Route  往哪儿去，即将进入的那个路由对象
// from:Route 从哪儿来，当前导航正要离开的路由对象
// next:Function  是否放行
//              1. next()  直接调用，不传参，不做处理，放行
//              2. next('/路径') 拦截到一个不同的地址去
//              3. 确保next函数，一定要调用，一个逻辑里面只调用一次

// 导航守卫存在的意义：可以加拦截判断
// 1. 判断用户有没有token，如果有，直接放行
// 2. 没有token，白名单的页面（登录，注册），这些可以访问
// 3. 没有token，要去的还是首页等需要授权的页面，拦截到登录

// 如果没有登录，放行的页面
const whiteList = ['/login', '/register']

// path Intelli
router.beforeEach((to, from, next) => {
  // console.log('全局前置守卫被调用了')
  // next()
  // 每次跳转路由的时候，才去取
  const token = getToken()
  if (token) {
    next()
  } else {
    // 判断一个字符串在数组中存在 includes / indexOf
    if (whiteList.includes(to.path)) {
      next() // 去吧
    } else {
      // 没在白名单，去登录
      Toast.fail({
        message: '你没有登录哦',
        duration: 2000
      })

      next('/login')
    }
  }

  // 其他情况呢？没有调用了？
})
// 性能优化 ==> 分成很多角度来展开 ==> 搜一下掘金 / B 站
export default router
